<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card shadow="always">
        <!-- 头部 -->
        <div class="field">
          <div class="left">
            <span class="course">学科名称</span>
            <el-input v-model="input" class="input"></el-input>
            <el-button @click="purge" size="mini">清除</el-button>
            <el-button type="primary" @click="filter" size="mini">搜索</el-button>
          </div>
          <div class="right"></div>
            <el-button type="success" @click="addSubject" size="mini">
              <i class="el-icon-edit"></i>
              <span>新增学科</span>
            </el-button>
        </div>
        <!-- 提示信息 -->
        <el-alert type="info" show-icon :closable='false'>
          <template #title>
            <span>数据一共 {{total}} 条</span>
          </template>
        </el-alert>
        <!-- 表单 -->
        <el-table :data="tableData" style="width: 100%" :header-cell-style='tableHeaderColor'>
          <el-table-column  label="序号" type="index" :index="indexMethod"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称"></el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default='{row}'>
              {{newDate(row.addDate)}}
            </template>
             </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template #default='{row}'>
              {{row.isFrontDisplay===1?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column  label="操作" width='240'>
            <template #default='{row}'>
              <el-button type="text" @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
              <el-button type="text" @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
              <el-button type="text" @click="editSubjects(row)">修改</el-button>
              <el-button type="text" @click="delSubjects(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
          background
          class="pagination"
      >
        </el-pagination>
      </el-card>
      <!-- 弹窗 -->
      <potting-subject :showDialog.sync='showDialog' :nodeDate='nodeDate' ref="potting" :subjectName='subjectName'></potting-subject>
    </div>
  </div>
</template>

<script>
import pottingSubject from './components/potting-subjects.vue'
import { list, remove } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      subjectName: '',
      showDialog: false,
      nodeDate: {}
    }
  },
  components: {
    pottingSubject
  },
  created () {
    this.subjectList()
  },
  methods: {
    // 修改学科
    editSubjects (date) {
      this.showDialog = true
      this.nodeDate = date
      this.$nextTick(() => {
        this.$refs.potting.echoSubject()
      })
    },
    // 删除学科
    delSubjects (data) {
      this.$confirm('此操作将永久删除学科, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove(data)
        this.$message.success('删除成功')
        if (this.subjectName !== '') {
          this.filter()
        } else {
          this.subjectList()
        }
      }).catch(() => {})
    },
    // 新增学科
    addSubject () {
      this.showDialog = true
    },
    // 处理时间日期格式
    newDate (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 搜索
    async filter () {
      this.subjectName = this.input
      const { data } = await list({ page: this.page, subjectName: this.subjectName, pagesize: this.pagesize })
      this.tableData = data.items
      this.total = data.counts
    },
    // 清除输入框的数据
    purge () {
      this.input = ''
      this.page = 1
      this.subjectList()
    },
    // 序号
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + (index + 1)
    },
    // 页容量
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      if (this.subjectName !== '') {
        this.filter()
      } else {
        this.subjectList()
      }
    },
    // 页码
    handleCurrentChange (val) {
      this.page = val
      if (this.subjectName !== '') {
        this.filter()
      } else {
        this.subjectList()
      }
    },
    // 设置表头单元格的回调方法
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#fafafa;border-bottom:2px solid #e8e8e8'
    },
    // 学科列表
    async subjectList () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      this.total = data.counts
    }
  }
}
</script>

<style scoped lang='scss'>
.app-container{
  padding: 0 10px;
  margin: 10px 0;
}
.field{
  display: flex;
  justify-content: space-between;
}
.left{
    display: flex;
    justify-content: flex-start;
  }
  span{
    font-size: 12px;
  }
  .course{
    font-size: 14px;
    font-weight:600;
    color: #606266;
    width: 80px;
    line-height: 36px;
    text-align: center;
  }
 .input{
    margin-right: 10px;
    width: 200px;
    height: 33px;
  }
  ::v-deep .el-input__inner{
    height: 33px;
  }
  ::v-deep .el-alert{
    margin: 16px 0;
  }
  .pagination{
    display: flex;
    justify-content:  flex-end;
    margin-top: 20px;
  }
</style>
